<template>
  <div class="pickers">
    <van-popup v-model="shows" position="bottom" :close-on-click-overlay="false">
      <van-picker :columns="columns" show-toolbar @cancel="onCancel" @confirm="onChange" />
    </van-popup>
  </div>
</template>
<script>
export default {
  name: 'Pickers',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    columns: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  computed: {

  },
  watch: {
    value(n) {
      this.shows = n;
    }
  },
  data() {
    return {
      shows: false
    };
  },
  methods: {
    onCancel() {
      this.shows = false;
      this.$emit('input', this.shows);
    },
    onChange(e) {
      this.shows = false;
      this.$emit('onChange', e);
      this.$emit('input', this.shows);
    }
  },
  created() {

  }
};
</script>
<style scoped>

</style>
